import React, { Component } from 'react';
import './Detailitemstyle.scss';

class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  componentDidMount () {
     var line = document.getElementsByClassName('line')[19]
     line.style.display='none'
     window.addEventListener('scroll', this.handleScroll);	
    }
    componentWillUnmount() {
          window.removeEventListener('scroll', this.handleScroll);	
          var books = document.getElementsByClassName('Wrapper-left')[0]
          books.style.display='none';
          
      }
    // handleScroll(){
    //   console.log(window.scrollY)
    
    //   var obj3 = document.getElementsByClassName('Header-content')[0];
    //   if (window.scrollY >= 500) {
            
    //           obj3.style.position = 'fixed';
    //           obj3.style.top = '0px';
    //           obj3.style.width = '1263px';
    //           obj3.style.zIndex = '100';
    //         }else{
            
    //           obj3.style.position = 'fixed';
    //           obj3.style.top = '60px';
           
    //         }
    // }
  
 
  render () { 
    // var images = []
    var Detailist= JSON.parse(localStorage.getItem('movielist'))
   
   console.log(Detailist)
   
    return (
      <div className = 'Detailcontext'>
        <div className='Header-content'>
            <div><span>目录</span></div>
            <div><span>介绍</span></div>
            <div><span>评论</span><span></span></div>
        </div>
        <div className='book-content'>
          <div className='book-content-title'>小册内容</div>
            <div className='book-content-detail'>
            {Detailist.map((item, index) => {return(<div className = 'book-content-detail-number'><p className='detail-number' >{ index+1 }</p><p className='line'></p>
            <div className='book-content-detail-detail'><p style={{fontSize:'16px',color:'#000'}}>{ item.content }</p><p><span>{item.CharaterNeedTime}</span>
            <span>{item.Charaterlearner}</span><span>{item.Charatertalker}</span></p></div></div>)})}
            </div>
            <div className='book-content-bottom'>
               <h2>小册介绍</h2>
               <p>如果需要用一句话来介绍这本小册的话，「<strong>一年磨一剑</strong>」应该是最好的答案了。</p>
               <p>为什么这样说呢？在出小册之前，我花了半年的时间做了一个 <strong>14K Stars</strong> 的前端面试开源项目。在半年的时间里，我收集了大量的一线大厂面试题，通过大数据统计出了近百个常考知识点，然后根据这些知识点写成了<strong>近十万字</strong>的内容。</p>
               <div className='book-content-img'><img src="https://user-gold-cdn.xitu.io/2018/12/19/167c24899d4cbc33?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt=""/></div>
               <p>Vue.js 无疑是前端最热门的框架之一，而 Vue.js 最精髓的，正是它的组件。写一个 Vue 工程，也就是在写一个个的组件。换言之，学好了 Vue.js 的组件，也就能很好的驾驭 Vue.js 框架和千变万化的复杂业务场景。</p>
               <p>如今，关于 Vue.js 的教程已经非常丰富，大部分开发者阅读文档后，都可以很快上手 Vue.js 的开发，而写好每一个组件，成了当前众多开发者的一个难题。</p>
               <p>Vue.js 的组件和组件化在使用中有非常多的技巧和最佳实践，本小册则针对 Vue.js 最核心的部分—组件，来深入讲解，带着完整示例来解决一个个与组件相关的疑难点和知识点。</p>
               <p>同时，作为 Vue.js 知名组件库 iView 的作者，深入开发超过 50 个极其复杂的通用组件，包含了 Vue.js 组件的各个场景，对 Vue.js 的组件开发，有着独树一帜的见解和经验。</p>
               <h2>作者简介</h2>
               <div className='book-content-writer'><img src="https://user-gold-cdn.xitu.io/2018/12/19/167c251505c58c3a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt=""/></div>
               <p>Aresn，基于 Vue.js 的开源 UI 组件库 — iView 的作者（GitHub 超过 18000 星）。现担任大数据公司 TalkingData 前端架构师。畅销书籍《Vue.js实战》的作者（Vue.js 作者尤雨溪作序，销量超 3 万册）。在掘金发表众多关于 Vue.js 的技术文章，获得点赞 7000+，阅读 24 万+。更多介绍可以阅读文章 <a style={{color:'rgb(0,127,255)'}}href="https://juejin.im/post/5880108f8d6d810058ae0def" rel="">《2016我的心路历程：从 Vue 到 Webpack 到 iView》</a>。</p>
               <h2>你会学到什么？</h2>
               <ul>
                  <li><span></span><b>了解 Vue.js 组件开发的精华</b></li>
                  <li><span></span><b>Vue.js 组件知识全覆盖</b></li>
                  <li><span></span><b>掌握多种 Vue.js 组件开发的模式</b></li>
                  <li><span></span><b>独立组件不依赖 Vuex 和 Bus 情况下，各种跨级通信手段</b></li>
                  <li><span></span><b>7 个完整的 Vue.js 组件示例</b></li>
                  <li><span></span><b>如何做好一个开源项目</b></li>
                  <li><span></span><b>Vue.js 容易忽略的 API 详解</b></li>
                  <li><span></span><b>Vue.js 面试、常见问题答疑</b></li>
              </ul>
              <h2>适宜人群</h2>
              <ul>
                <li><span></span><b>了解 JavaScript 语言</b></li>
                <li><span></span><b>Vue.js 初、中、高级开发者</b></li>
              </ul>
              <h2>购买须知</h2>
              <ol>
                <li><span>1、</span>本小册为图文形式内容服务，共计 20 节；</li>
                <li><span>2、</span>全部文章 12 月 18 日更新完成；</li>
                <li><span>3、</span>购买用户可享有小册永久的阅读权限；</li>
                <li><span>4、</span>购买用户可进入小册微信群，与作者互动；</li>
                <li><span>5、</span>掘金小册为虚拟内容服务，一经购买成功概不退款；</li>
                <li><span>6、</span>掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；</li>
                <li><span>7、</span>在掘金小册阅读过程中，如有任何问题，请邮件联系 <a target="_blank" href="https://link.juejin.im?target=mailto%3Axiaoce%40xitu.io" rel="nofollow noopener noreferrer">xiaoce@xitu.io</a></li>
              </ol>
            </div>
        </div>
      </div>
    )
  }
}
export default Com;
